<template>
<div style="width:500px;margin:auto">


    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" @keyup.native.enter="submitForm(formRef)" />
        </el-form-item>
        <el-form-item>
            <el-button style="width:100%" type="primary" @click="submitForm(formRef)" >登 录</el-button>
        </el-form-item>
    </el-form>
</div>    
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { setStorage } from '@/utils/storage';
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter();
const form = reactive({
    username: '',
    password: ''
});
const formRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '必填', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '必填', trigger: 'blur' }
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            setStorage('username',form.username)
            console.log('submit!')
            router.push('/')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>